import React, { useState, useEffect } from "react";
import { Breadcrumb } from 'antd';
import SearchContent from './SearchContent';
import TableContent from './TableContent';
import StaticShowContent from './StaticShowContent';
import { getStaticNumberOp } from '../../service';
import styles from './index.module.less';

const titleMap = {
  1: '待还账期列表',
  2: '未出账期列表',
  3: '历史账期列表',
}

const CheckBillDetails = ({ activepage, current, goback }) => {

  const [query, setQuery] = useState(null);
  const [amountObj, setAmountObj] = useState({});

  const { type, contractNo, period } = current;

  const { storeTakeGoodsAmount, refundGoodsAmount, directlyOrderAmount, purchaseOrderAmount, discountAmount } = amountObj;

  useEffect(()=>{
    if(activepage == '2'){
      setQuery({});
    }else{
      setAmountObj({});
    }
  },[activepage])

  useEffect(()=>{
    if(query && activepage == '2'){
      getAmountFunc();
    }
  },[query])

  const getAmountFunc = async () => {
    const { data, success } = await getStaticNumberOp({
      contractNo,
      period: period || undefined
    })
    if(success){
      setAmountObj(data);
    }
  }

  const searchProps = {
    type,
    handleSearch(value){
      setQuery(value ? value : {});
    }
  }

  const tableProps = {
    query,
    current
  }

  return (<>
    <div className={styles.wrap}>
      <Breadcrumb style={{marginBottom:'16px'}}>
        <Breadcrumb.Item onClick={goback} style={{cursor:'pointer'}}>{titleMap[type]}</Breadcrumb.Item>
        <Breadcrumb.Item>对账单明细</Breadcrumb.Item>
      </Breadcrumb>
       <StaticShowContent current={current}/>
       <h3 className={styles.title}>支付类型金额明细：</h3>
       <div className={styles.showNumberWrapper}>
          <div className={styles.showNumberBox}>
             <span>{storeTakeGoodsAmount || '0.00'}</span>
             <p>门店拿货(元)</p>
          </div>
          <div className={styles.showNumberBox}>
             <span>{refundGoodsAmount || '0.00'}</span>
             <p>退货退款(元)</p>
          </div>
          <div className={styles.showNumberBox}>
             <span>{directlyOrderAmount || '0.00'}</span>
             <p>直发订单(元)</p>
          </div>
          <div className={styles.showNumberBox}>
             <span>{purchaseOrderAmount || '0.00'}</span>
             <p>采购订单(元)</p>
          </div>
          <div className={styles.showNumberBox}>
             <span>{discountAmount || '0.00'}</span>
             <p>优惠金额(元)</p>
          </div>
       </div>
       <h3 className={styles.title}>对账单明细：</h3>
       <SearchContent {...searchProps} />
       <TableContent {...tableProps} />
    </div>
 </>)
};

export default React.memo(CheckBillDetails, (prev, next)=>{
  return prev.activepage == next.activepage;
})
